<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: ZJZ
 * @Date: 2021-09-03 10:44:44
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:46:24
-->
<template>
  <div>
    <el-dialog
      title="场景管理"
      :visible.sync="dialog.senceAdmin"
      width="50%"
      @close="senceClose"
      custom-class="dialogClass"
      :close-on-click-modal="false"
    >
      <div class="tips">可拖动调整场景的现实顺序</div>
      <vxe-table
        border
        row-key
        ref="xTable1"
        class="sortable-row-demo"
        :scroll-y="{ enabled: false }"
        :data="tableData"
        auto-resize
      >
        <vxe-column width="60">
          <template #default>
            <span class="drag-btn">
              <i class="vxe-icon--menu"></i>
            </span>
          </template>
          <template #header>
            <vxe-tooltip
              v-model="showHelpTip1"
              content="按住后可以上下拖动排序！"
              enterable
            >
              <i
                class="vxe-icon--question"
                @click="showHelpTip1 = !showHelpTip1"
              ></i>
            </vxe-tooltip>
          </template>
        </vxe-column>
        <vxe-column field="name" title="场景名称"></vxe-column>
        <vxe-column title="操作">
          <template #default="{ row }">
            <span @click="setDeafult(row)" class="setDeafult">设为默认</span>
            <span
              @click="editSence(row)"
              class="setDeafult"
              v-if="!(row.systemDefault <= 3)"
            >
              编辑
            </span>
            <span
              @click="delSence(row)"
              class="setDeafult"
              v-if="!(row.systemDefault <= 3)"
            >
              删除
            </span>
          </template>
        </vxe-column>
      </vxe-table>
      <span slot="footer">
        <el-button @click="dialog.senceAdmin = false">取消</el-button>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Bus from "@/utils/Bus";
import Sortable from "sortablejs";
import { queryScene } from "@/api/CRM";
import { defaultScene, delScene, sceneSort } from "@/api/currency";
export default {
  props: {
    dialog: {
      type: Object,
      required: true,
    },
    senceType: {
      type: Number,
      default: 9,
    },
  },
  data() {
    return {
      tableData: [],
      showHelpTip1: false,
    };
  },
  created() {
    this.getSenceList();
  },
  mounted() {
    this.$nextTick(function () {
      this.rowDrop();
    });
  },
  beforeDestroy() {
    if (this.sortable1) {
      this.sortable1.destroy();
    }
  },
  methods: {
    // 保存排序
    onSubmit() {
      let arr = [];
      this.tableData.forEach((item) => {
        arr.push(item.sceneId);
      });

      sceneSort(arr).then((res) => {
        this.$message.success(res.msg);
        this.dialog.senceAdmin = false;
      });
    },
    // 删除高级选项
    async delSence(row) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该线索, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      /*如果用户确认打印confirm,如果用户取消显示cancel*/
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除!");
      } else {
        delScene({
          sceneId: row.sceneId,
        }).then((res) => {
          console.log(this.$parent);
          this.$parent.getScene();
          this.getSenceList();
          this.$message.success(res.msg);
        });
      }
      // console.log('确认了删除')
    },
    // 获取高级筛选列表
    getSenceList() {
      queryScene({
        type: this.senceType,
      }).then((res) => {
        if (res.default !== null) {
          res.scenes.unshift(res.default);
          this.tableData = res.scenes;
        } else {
          this.tableData = res.scenes;
        }
      });
    },
    // 设置默认
    setDeafult(row) {
      defaultScene({
        sceneId: row.sceneId,
      }).then((res) => {
        console.log(this.$parent);
        this.$parent.getScene();
        this.getSenceList();
        this.$message.success(res.msg);
      });
    },
    // 编辑
    editSence(row) {
      Bus.$emit("querySenceList", row);
      this.dialog.dialogScreenVisible = true;
    },
    senceClose() {
      this.dialog.senceAdminEject = false;
      this.$parent.getScene();
    },
    //行拖拽
    rowDrop() {
      this.$nextTick(() => {
        const xTable = this.$refs.xTable1;
        this.sortable1 = Sortable.create(
          xTable.$el.querySelector(".body--wrapper>.vxe-table--body tbody"),
          {
            handle: ".drag-btn",
            onEnd: ({ newIndex, oldIndex }) => {
              const currRow = this.tableData.splice(oldIndex, 1)[0];
              this.tableData.splice(newIndex, 0, currRow);
              console.log(this.tableData);
            },
          }
        );
      });
    },
  },
};
</script>

<style lang="less" scoped>
.setDeafult {
  margin-right: 5px;
  color: #1267fa;
}
</style>